<template>
    <view class="page pb-flex-column">
        <pb-navbar title="xxxx"></pb-navbar>
        <view class="pb-flex-column" v-for="(item, index) in dataSource" :key="index"></view>
        <!-- <view class="pb-footer-fixed pb-flex-column">
		    <text class="submit">确定</text>
		</view> -->
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { xxxxxApi } from '@/xxx/api/xxxApi.js'
export default {
    data() {
        return {
            queryParams: {
                page: 1,
                limit: 20
            },
            dataSource: [],
            hasMore: true
        }
    },
    onLoad() {
        this.xxxxx()
    },
    onReachBottom() {
        if (this.hasMore) {
            ++this.queryParams.page
            this.xxxxx()
        }
    },
    onShow() {},
    onHide() {},
    beforeDestroy() {},
    watch: {},
    computed: {
        // ...mapGetters('family', ['memberKey', 'curMember']),
    },
    methods: {
        xxxxx() {
            xxxxxApi(this.queryParams)
                .then(res => {
                    if (res.data && res.data.length < this.queryParams.limit) {
                        this.hasMore = false
                    } else {
                        this.hasMore = true
                    }
                    if (!this.$isEmpty(res.data)) {
                        this.dataSource = this.dataSource.concat(res.data)
                    }
                })
                .catch(error => {
                    if (this.queryParams.page > 1) {
                        --this.queryParams.page
                    }
                })
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    background-color: $uni-bg-color;
    min-height: 100vh;
    // padding-bottom: 180rpx;
}
</style>